<!--
 * @Descripttion: 考卷新增考题模态框
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2021-05-17 15:13:05
 * @LastEditTime: 2021-05-21 15:55:23
 * @param {Boolean} visible 模态框显示
 * @param {Object} data 模态框数据
 * @return {Event} refresh 需要刷新外部列表事件
 * @FilePath: \cscec-pms-admin\src\views\partyMasses\partyStudyInfo\testPaperSetting\components\AddForm.vue
-->
<template>
  <a-modal
    :title="'添加考题'"
    :visible="visible"
    destroy-on-close
    :width="1200"
    @cancel="handleClose"
  >
    <!-- 表单 -->
    <a-form-model
      ref="form"
      :model="form"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-row :gutter="16">
        <a-col :span="10">
          <a-form-model-item
            label="试题分类"
            prop="examTypeId"
          >
            <a-select
              v-model="form.examTypeId"
              :show-search="true"
              option-filter-prop="children"
              :filter-option="filterOption"
              placeholder="请选择"
            >
              <a-select-option
                v-for="{value,label} in list.examTypeId"
                :key="value"
                :value="value"
              >
                {{ label }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item
            label="试题内容"
            prop="examQuestionContent"
          >
            <base-input
              v-model="form.examQuestionContent"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item
            label="试题类型"
            prop="examQuestionType"
          >
            <selector
              v-model="form.examQuestionType"
              select-type="27"
              placeholder="请选择"
              url-type="union"
              value-name="code"
              :disabled="data.type==='detail'"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item
            label="创建时间"
            prop="startEndDate"
          >
            <a-range-picker
              v-model="form.startEndDate"
              format="YYYY-MM-DD"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="4">
          <a-button
            type="primary"
            @click="handleSearch"
          >
            搜索
          </a-button>
          <a-button
            style="margin-left:8px;"
            @click="handleReset"
          >
            重置
          </a-button>
        </a-col>
      </a-row>
      <!-- 表格 -->
      <s-table
        ref="table"
        size="default"
        row-key="id"
        :columns="columns"
        :data="loadData"
        :alert="true"
        show-size-changer
        show-quick-jumper
        :row-selection="rowSelection"
        :scroll="{ y: 300 }"
      />
      <!-- 表格 -->
    </a-form-model>
    <!-- 表单 -->
    <!-- 模态框按钮 -->
    <template slot="footer">
      <a-button @click="handleClose">
        取消
      </a-button>
      <a-button
        v-if="data.type!=='detail'"
        type="primary"
        :loading="saveLoading"
        @click="handleSave"
      >
        提交
      </a-button>
    </template>
    <!-- 模态框按钮 -->
  </a-modal>
</template>
<script>
import { STable } from '@/components'
import Selector from '@/components/Select/Selector'
import { queryAddQeustionList, addPaperQuestion } from '@/api/partyMasses/partyStudyInfo/testPaperSetting'
export default {
  name:'a'+ Date.now(),
  // name: 'AddForm',
  components: {
    STable,
    Selector
  },
  props: {
    // 模态框显示
    visible: {
      type: Boolean,
      require: true
    },
    // 模态框数据
    data: {
      type: Object,
      require: true
    }
  },
  data() {
    return {
      // 标题
      title: '',
      // 表单布局
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      // 搜索表单
      form: {},
      // 表头
      columns: [
        {
          title: '试题分类',
          dataIndex: 'examTypeName',
          key: 'examTypeName',
          align: 'center'
        },
        {
          title: '试题内容',
          dataIndex: 'content',
          key: 'content'
        },
        {
          title: '试题类型',
          dataIndex: 'typeName',
          key: 'typeName',
          align: 'center'
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          key: 'createTime',
          align: 'center'
        }
      ],
      // 依赖数据
      list: {},
      // 提交loading
      saveLoading: false,
      // 选中项
      selectedRowKeys: [],
      // 复选
      rowSelection: {
        onChange: (selectedRowKeys) => {
          this.selectedRowKeys = selectedRowKeys
        },
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.dis_able !== 0,
            name: record.name
          }
        })
      }
    }
  },
  watch: {
    // 监听显示弹窗写入数据
    visible: {
      handler(newV, oldV) {
        if (newV) {
          this.loading = true
          this.list = this.data.list
          this.loading = false
        }
      }
    }
  },
  methods: {
    /**
     * @description: 搜索
     * @param {Void}
     * @return {Void}
     */
    handleSearch() {
      this.$refs.table.refresh(true)
    },
    /**
     * @description: 重置搜索
     * @param {Void}
     * @return {Void}
     */
    handleReset() {
      this.form = {}
      this.$refs.table.refresh(true)
    },
    /**
     * @description: 试题分类搜索
     * @param {String} input
     * @param {Object} option
     * @return {Boolean} 是否满足搜索条件
     */
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    /**
     * @description: 表格数据加载方法
     * @param {Object} parameter 分页信息
     * @return {Promise} 接口Promise
     */
    async loadData(parameter) {
      try {
        const params = Object.assign({}, parameter, { query: this.form })
        if (this.form?.startEndDate?.length > 0) {
          params.query.startTime = this.form.startEndDate[0].format('YYYY-MM-DD') || void 0
          params.query.endTime = this.form.startEndDate[1].format('YYYY-MM-DD') || void 0
        }
        params.query.examPaperId = this.data.record.id
        const { data, currentPage, totalSize } = await queryAddQeustionList(params)
        this.total = totalSize
        return Promise.resolve({
          data,
          currentPage,
          totalSize
        })
      } catch (error) {
        console.log(error)
        return Promise.reject(error)
      }
    },
    /**
     * @description: 关闭模态框
     * @param {Void}
     * @return {Void}
     */
    handleClose() {
      this.form = {
        name: void 0
      }
      this.$refs.form.resetFields()
      this.$emit('update:visible', false)
    },
    /**
     * @description: 提交
     * @param {Void}
     * @return {Void}
     */
    handleSave() {
      this.$confirm({
        title: '温馨提示',
        content: '确定是否提交数据？',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {
          this.saveLoading = true
          addPaperQuestion({
            id: this.data.record.id,
            questionIds: this.selectedRowKeys
          })
            .then(({ code }) => {
              if (code === this.SUCCESS_CODE) {
                this.$message.success('新增成功')
                this.handleClose()
                this.$emit('refresh', true)
              } else {
                this.$message.error('新增失败')
              }
            })
            .catch((error) => {
              console.log(error)
              this.$message.error('新增失败！')
            })
            .finally(() => {
              this.saveLoading = false
            })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
